<template>
    <div class="configuration-management">
      <h1>配置管理</h1>
      <el-card>
        <template #header>
          <div class="card-header">
            <span>配置列表</span>
          </div>
        </template>
        <el-table :data="configurations" style="width: 100%">
          <el-table-column prop="name" label="配置名称" width="180"></el-table-column>
          <el-table-column prop="value" label="配置值" width="180"></el-table-column>
          <el-table-column prop="description" label="描述" width="180"></el-table-column>
          <el-table-column label="操作" width="180">
            <template #default="{ row }">
              <el-button size="small" @click="handleEditConfig(row)">编辑</el-button>
              <el-button size="small" type="danger" @click="handleDeleteConfig(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-card>
        <template #header>
          <div class="card-header">
            <span>新建配置</span>
          </div>
        </template>
        <el-form :model="newConfig" label-width="100px">
          <el-form-item label="配置名称">
            <el-input v-model="newConfig.name"></el-input>
          </el-form-item>
          <el-form-item label="配置值">
            <el-input v-model="newConfig.value"></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="newConfig.description"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmitNewConfig">提交</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from 'vue';
  
  interface Configuration {
    id: number;
    name: string;
    value: string;
    description: string;
  }
  
  const configurations = ref<Array<Configuration>>([]);
  const newConfig = ref({
    name: '',
    value: '',
    description: '',
  });
  
  const fetchConfigurations = async () => {
    // 模拟从服务器获取配置数据
    await new Promise(resolve => setTimeout(resolve, 2000));
    configurations.value = [
      { id: 1, name: 'cache_timeout', value: '300', description: '缓存超时时间' },
      { id: 2, name: 'max_connections', value: '1000', description: '最大连接数' },
      { id: 3, name: 'log_level', value: 'INFO', description: '日志级别' },
    ];
  };
  
  const handleEditConfig = (config: Configuration) => {
    alert(`编辑配置: ${config.name}`);
    // 这里可以弹出编辑配置的模态框
  };
  
  const handleDeleteConfig = (config: Configuration) => {
    alert(`删除配置: ${config.name}`);
    // 这里可以调用 API 删除对应的配置
  };
  
  const handleSubmitNewConfig = () => {
    alert(`提交新的配置: ${newConfig.value.name}`);
    // 这里可以调用 API 提交新的配置
  };
  
  onMounted(() => {
    fetchConfigurations();
  });
  </script>
  
  <style scoped>
  .configuration-management {
    display: grid;
    /* grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); */
    gap: 20px;
    padding: 20px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  </style>